@extends('home.base')
@section('title')
    详细信息
@endsection
@section('css')
    <style>
        .zan img{
            float: left;
            margin-top: 184px;
            margin-left: 10px;
        }
        .say{
            display: inline-block;
            font-size: 20px;
            float: left;
            margin-top: 184px;
            margin-left: 10px;
            color: #ff3600;
            cursor: pointer;
            border-color: #ffa830;
        }
        .userWords{
            margin-top: 185px;
            float: left;
            margin-left: 10px;
            border-color: #ffa830;
            color: #0000A1;
        }
        .picTrue{
            width: 300px;
            height: 255px;
        }
    </style>

@endsection
@section('content')
    <div class="wrapper wrapper-content  animated fadeInRight article">
                <img class="picTrue" src="{{ asset('img')}}/{{ $data -> userid }}/{{ $data -> imageURL }}" alt="img01" style="float: left;"/>
            <div class="zan">
                <img src="{{ asset('images/base/count2.png')}}">
            </div>
            <input class="userWords" type="text" placeholder="说说你想说的吧">
            <span class="say">评论</span>
        <div class="row">
            <div class="col-lg-12">

                <h2>评论：</h2>

                <div class="social-feed-box">
                    <div class="social-avatar">
                        <a href="" class="pull-left">
                            <img alt="image" src="img/a1.jpg">
                        </a>

                    </div>
                    <div class="social-body">
                        <p>
                            好东西，我朝淘宝准备跟进，1折开卖
                            
                        </p>
                    </div>
                </div>

            </div>
        </div>

    </div>
@endsection


@section('js')
    <script src="{{ asset('js/uploadFile/content.js')}}"></script>
    <script>
        $(".zan img").click(function () {
            url = $(this).attr('src');
            // 点击变升序
            if(url.indexOf('2.png') >0){
                //修改路径
                url = url.replace(/2.png/, '1.png');
                //替换路径
                $(this).attr('src', url);
            }
            urlZan = "{{ url('/home/detail') }}";
            $.ajax({
                type: "GET",
                url: urlZan,
                data: {data:1},
                dataType: "json",
                headers:{
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                success: function(msg){
                    if(msg = 1)
                    {
                        alert('点赞成功');
                    }else{
                        alert('点赞失败');
                    }

                },
                error:function(data){
                    console.log('bbbbb');
                }
            });

        });

        //评论
        $(".say").click(function () {
            var words = $(".userWords").val();
            var str = `<div class="social-feed-box">
                    <div class="social-avatar">
                        <a href="" class="pull-left">
                            <img alt="image" src="{{ asset('images/base/moren.jpg')}}">
                        </a>
                    </div>
                    <div class="social-body">
                        <p>`+words+`</p>
                    </div>
                </div>`;
            $(".social-feed-box").append(str);

        });
    </script>
@endsection



